<template>
  <AnalysisWrap titleText="日照分析" info="提示:模拟设定时间范围内的太阳光照效果" @goAnalysisOtherViewFn="goAnalysisOtherView">
    <template #container>
      <div class="control">
        <span class="lable">日期选择器：</span>
        <mars-date-picker class="data-picker" v-model:value="currDate" valueFormat="YYYY-MM-DD" />
      </div>
      <div class="f-mb control">
        <span class="lable">时间选择：</span>
        <mars-slider @change="timeChange" v-model:value="timeVal" :min="0" :max="1440" :step="1" />
      </div>
      <div class="f-mb control">
        <span class="lable"> 当前时间：</span>
        <span>{{ currDate }} {{ hours }} 时 {{ minutes }}分</span>
      </div>
      <div class="control-play">
        <mars-button @click="onClickStartStop" class="control-btn">
          <span>{{ start == true ? "播放" : "暂停" }}</span>
        </mars-button>
      </div>
    </template>
  </AnalysisWrap>
</template>

<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref } from "vue"
import dayjs from "dayjs"
import AnalysisWrap from "./analysis-wrap.vue"
import * as mapWork from "./map"

const emit = defineEmits(["goAnalysisOtherView"])

function goAnalysisOtherView(name: string) {
  emit("goAnalysisOtherView", name)
}

onMounted(() => {
  timeChange()
})

onUnmounted(() => {
  mapWork.onUnmountedSunlight()
  mapWork.eventTarget.off("changeShadow", changeShadow)
})

const start = ref(true)
const onClickStartStop = () => {
  if (start.value) {
    mapWork.startPlay(currDate.value, hours.value, minutes.value)
  } else {
    mapWork.stopPlay()
  }
  start.value = !start.value
}

const timeVal = ref<number>(420)

const currDate = ref<string>(dayjs().format("YYYY-MM-DD"))

const hours = computed(() => Math.floor(timeVal.value / 60))
const minutes = computed(() => Math.floor(timeVal.value % 60))

const timeChange = () => {
  mapWork.setShadows(currDate.value, hours.value, minutes.value)

  start.value = true
}

mapWork.eventTarget.on("changeShadow", changeShadow)
function changeShadow(event: any) {
  const date = event.shadowTime

  timeVal.value = date.getHours() * 60 + date.getMinutes()
}
</script>
<style lang="less" scoped>
.control {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  .lable {
    text-align: right;
    width: 90px;
    font-size: 14px;
    text-align: right;
    color: rgba(234, 242, 255, 0.8);
  }
  .data-picker {
    width: 228px;
    height: 32px;
  }
}

.control-play {
  width: 100%;
  .control-btn {
    width: 100%;
    font-size: 14px;
    line-height: 22px;
  }
}

.analysis-common-title_small {
  position: absolute;
  top: 12px;
  right: 10px;
}
.f-tac {
  margin-bottom: 20px;
}

.ant-slider {
  width: 200px !important;
}
</style>
